<template>
  <div class="dragSearch">
    <div class="searchStyleP">
      <div class="searchStyle">
        <el-input
          placeholder="输入地址"
          @input="searchAddress"
          v-model="input4"
          @focus="handleChangeId"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="warning" class="searchBtn" @click="handleSearch"
          >搜索</el-button
        >
      </div>
      <div class="searchStyleAbsolute" v-show="changeId">
        <div class="searchStyleAbsolute-item pianqu1" @click="handleInsertClick(item)" v-for="(item, index1) in allList" :key="index1">
         <img class="w18" src="@/assets/map/sous.jpg" alt="" srcset="">
          {{ item.title}} <span v-if="item.geom84" class="pianqu">片区</span>
        </div>
      </div>
    </div>

    <div class="slideStyle">
      <div class="huakuai">
        <div class="huakuai-left">
          <el-checkbox @change="handleChecked" v-model="isCheckboxed"
            >半径范围</el-checkbox
          >
        </div>
        <div class="huakuai-right">
          <div class="huakuai-right-">
            <el-slider
              v-model="value1"
              :min="0.5"
              :max="3"
              :step="0.1"
            ></el-slider>
          </div>
          <div class="huakuai-right-bottom">
            <div
              v-for="(item, index) in list"
              :key="index"
              class="lab"
              :style=" index==1?'margin-left:-60px':''"
              @click="handleClick(item)"
              :class="item.id === TabId ? 'activeLab' : ''"
            >
              {{ item.lable}}km
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dragMove from "./svg/dragMove.vue";
import dragMoveTo from "./svg/dragMoveTo.vue";
export default {
  components: { dragMove, dragMoveTo },
  props: ['input4',"isCheckbox", "allList", 'changeId','distance'],
  data() {
    return {
      value1: 0.5,
      list: [
        {
          lable: 0.5,
          id: 0,
        },
        {
          lable: 1,
          id: 1,
        },
        {
          lable: 2,
          id: 2,
        },
        {
          lable: 3,
          id: 3,
        },
      ],
      TabId: 0,
      searchResult: [],
      isCheckboxed:false
    };
  },

watch: {
  isCheckbox  (val) {
    console.log('=================是否显示圈选=====',val);
            this.isCheckboxed =val
        },
  value1(val) {
      // console.log('=================LLLLLLLLLLLLL=====',val)
      this.$emit("setKM", { lable: val, Checked: this.isCheckboxed });

    },
    distance(val){
      console.log('=================valvalvalval=====',val)

    }
  },
  mounted() {
      this.value1=  this.distance
      // console.log('=================this.value1=====',this.value1)
  },
  methods: {
    handleChecked(e) {
      console.log("-2222---", this.isCheckboxed);
      this.$emit("handleChecked", !this.isCheckboxed);
    },
    handleClick(item) {
      this.value1 = item.lable;
      this.TabId = item.id;
      this.$emit("setKM", { lable: item.lable, Checked: this.isCheckboxed });
    },
    handleSearch() {
      this.$emit("handleSearchData", this.input4);
      // this.$emit('handleInsertPointClick',{ searchData:this.input4})

    },
    //搜索地址
    searchAddress() {

      // this.$emit("handleSearchData", this.input4);
      this.$emit('handleInsertPointClick',{ searchData:this.input4})

    },
    handleInsertClick(item){
      // this.input4 = item.title
      console.log(item,'---------99999')
      // this.$emit('handleInsertPointClick',{ searchData:this.input4})

      this.$emit('handleInsertPoint',{item,searchData:item.title })
    },
    handleChangeId(){
      this.$emit('handleChangeIds',this.changeId)
    }
  },
};
</script>

<style scoped lang="scss">
.searchStyleP {
  position: relative;
}
.dragSearch {
  position: absolute;
  top: 25px;
  right: 40px;
  z-index: 8;
}
.searchStyleAbsolute {
  background-color: #fff;
  width: 100%;
  position: absolute;
  top: 53px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 6px 0px rgba(7, 28, 69, 0.3);
  padding: 10px 0;
  cursor: pointer;
  max-height: 500px;
  overflow-y: scroll;
}
.searchStyleAbsolute-item{
  padding: 8px 10px;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.searchStyle {
  width: 452px;
  height: 53px;
  background-color: #fff;
  box-shadow: 0px 2px 6px 0px rgba(7, 28, 69, 0.3);
  border-radius: 0px 0px 0px 0px;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
::v-deep .searchStyle .el-input__inner {
  border: 0 !important;
}
.searchBtn {
  height: 53px;
}
.slideStyle {
  width: 452px;
  position: absolute;
  top: 35px;
  z-index: 8;
  background-color: #fff;
  height: 75px;
  border-radius: 4px;
  margin-top: 25px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.huakuai {
  width: 429px;
  padding: 5px;
  background: #f7f8fb;
  margin: 0 auto;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.huakuai-right {
  width: 70%;
}
.huakuai-right-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.lab {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #222222;
  cursor: pointer;
}
.activeLab {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 15px;
  color: #3360d7;
  cursor: pointer;
}
// .drag {
//   position: absolute;
//   top: 25px;
//   left: 40px;
//   z-index: 8;
//   background-color: #fff;
//   box-shadow: 0px 2px 6px 0px rgba(7, 28, 69, 0.3);
//   border-radius: 4px;
//   overflow: hidden;
// }

// .drag-item {
//   width: 74px;
//   height: 78px;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
//   cursor: pointer;
// }
// .active {
//   background-color: #0071df;
// }
// .color1 {
//   color: #222;
// }
// .color2 {
//   color: #fff;
// }
.pianqu1{
  font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #616266;
}
.pianqu1:hover{
  background: #F6F7FA;
}
.pianqu{
  font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #999999;
margin-left: 15px;
}
.w18{
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-right: 5px;
}
</style>
